<template>
  <a-modal
    :title="type == 'peijian' ? '选择配件' : '备注标签'"
    :width="1200"
    :visible="visible"
    @ok="handleOk"
    @cancel="hide"
    :centered="true"
    okText="提交"
  >
    <div style="display: flex">
      <a-input v-model="tagName" style="margin-right: 20px"/>
      <a-button type="primary" @click="tagSearch" icon="search">查询</a-button>
    </div>
    <a-checkbox-group v-model="selectTag">
      <a-row>
        <a-col :span="6" v-for="item in list" :key="item.name" v-show="item.name.indexOf(tagNameDisplay)>-1">
          <a-checkbox :value="item.name" style="margin-top: 10px">
            {{ item.name }}
            <label style="color: #2BAEEE;font-size: 8px;margin-left: 12px" v-if="type != 'peijian'" @click="tagDel(item.id)">删除</label>
          </a-checkbox>
        </a-col>
      </a-row>
    </a-checkbox-group>
  </a-modal>
</template>

<script>
import {
  clothesMakeColor,
  clothesMakeTag,
  clothesRemarkList,
  clothesRemarkDetail,
  clothesSplit,
  clothesAddTag,
  clothesAddColor,
  delClothesTag
} from '@/api/clothes'
export default {
  props: {
    /*list: {
      type: Array,
      default: () => [],
    },*/
    value: {
      type: Array,
      default: () => [],
    },
    cid: '',
    type: '',
  },
  created() {
    this.clothesRemarkList();
  },
  data() {
    return {
      visible: false,
      selectTag: [],
      tagName: '',
      tagNameDisplay: '',
      list: [],
    }
  },
  methods: {
    clothesRemarkList () {
      clothesRemarkList().then(res => {
        this.list = this.type == 'peijian' ? res.data.split : res.data.tag;
      })
    },
    tagSearch() {
      this.tagNameDisplay = this.tagName;
    },
    tagDel(id) {
      let params = { id: id };
      delClothesTag(params).then((res) => {
        this.$message.success('操作成功');
        this.clothesRemarkList();
      })
    },
    show() {
      this.selectTag = [...this.value]
      this.visible = true
    },
    hide() {
      this.visible = false
    },
    handleOk() {
      let params =
        this.type == 'peijian'
          ? {
              id: this.cid,
              split: this.selectTag,
            }
          : {
              id: this.cid,
              tag: this.selectTag,
            }
      if (this.type == 'peijian') {
        clothesSplit(params).then((res) => {
          this.$message.success('操作成功')
          this.$emit('a')
        })
      } else {
        clothesMakeTag(params).then((res) => {
          this.$message.success('操作成功')
        })
      }

      this.$emit('input', this.selectTag)
      this.hide()
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-checkbox-group {
  width: 100%;
}
</style>
